<template lang='pug'>
.page
  .NodeManage
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(:columns="nodeThead" :data="nodeTable" :stripe="true")
        .clearfix.font-16(slot="header")
          .table-title-lefttxt.pull-left
            |业务
            span.text-info.pl-5.pr-5.font-weight {{formData.parameterTypeEnumName}}
            Divider(type="vertical")
            |业务类型
            span.text-info.pl-5.pr-5.font-weight {{formData.parameterName}}
            Divider(type="vertical")
            |区分城市
            span.text-info.pl-5.pr-5.font-weight {{formData.whetherDistinguishCitie == 1 ? '是' : '否'}}
          .pull-right.table-title-btns
            Button.mr-10(type="info" @click="handleShowCreateNodeModal('')") 新增

        template(slot-scope="{ row, index }" slot="action")
          Button.mr-10(type="text" size="small" @click="handleShowCreateNodeModal(row.id)") 编辑
          Button.mr-10(type="text" size="small" @click="handleMoveUp(index)") 上移
          Button.mr-10(type="text" size="small" @click="handleMoveDown(index)") 下移
          Button.mr-10(type="text" size="small" @click="isDeleteModal(row, 'nodeTable')") 删除
          //- Button.mr-10(type="text" size="small") 启用
          Button(type="text" size="small" v-if="row.linkStatus == -1" @click="enabledList(row.id, 1)") 启用
          Button(type="text" size="small" v-if="row.linkStatus == 1" @click="enabledList(row.id, -1)") 禁用
    .clearfix.text-center.pt-20.mb-60
      Button(v-if="isChangeSort" type="info" @click="handleSaveTableSort") 保存表格顺序
    

    .pl-20.pr-20.bg-white(v-if="formData.whetherDistinguishCitie == 1")
      Table.hasTitle-table.beautiful-table(:columns="cityThead" :data="cityTable" :stripe="true")
        .clearfix.font-16(slot="header")
          .pull-right.table-title-btns
            Button.mr-10(type="info" @click="handleShowCreateCityModal('')") 新增
        template(slot-scope="{ row, index }" slot="action")
          Button.mr-10(type="text" size="small" @click="handleShowCreateCityModal(row.id)") 编辑
          Button.mr-10(type="text" size="small" @click="isDeleteModal(row, 'cityTable')") 删除
          Button(type="text" size="small" @click="handleDownLoad(row)") 附件下载
      

    //- 新建环节弹窗
    CreateNodeModal(ref="CreateNodeModal" @query="searchFn")

    //- 新建城市弹窗
    CreateCityModal(ref="CreateCityModal" @query="searchFn")
</template>

<script>
import config from '@/config'
import { Common } from '@/utils/common.js'
import dataApi from '@/api/data.js'
import { SysBasedataApi } from '@/api/SysBasedata.api.js'
import { TreatmentApi } from '@/api/Treatment.api.js'
import { editNodeThead, editCityThead } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import CreateNodeModal from './modal/CreateNodeModal.vue'
import CreateCityModal from './modal/CreateCityModal.vue'
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name: 'editNode',

  components: {
    CreateNodeModal,
    CreateCityModal
  },

  data () {
    return {
      userId: null,
      parameterId: null,
      nodeThead: _cloneDeep(editNodeThead),
      cityThead: _cloneDeep(editCityThead),
      // tableData: [],
      // tableComone: {
      //   pageIndex: 1, // 页码
      //   totalRows: 0, // 总条数
      //   pageSize: 5 // 当前页面展示条数
      // },
      nodeTable: [],
      nodeTableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 5 // 当前页面展示条数
      },
      cityTable: [],
      cityTableComone: {
        pageIndex: 1, // 页码
        totalRows: 0, // 总条数
        pageSize: 5 // 当前页面展示条数
      },
      formData: {
        parameterTypeEnumName: null,
        parameterName: null,
        parameterStatus: null,
        whetherDistinguishCitie: null,
        rowVersion: null
      },
      // arrListDown: {
      //   defaultRadioArr: [{ value: '1', label: '是' }, { value: '0', label: '否' }],
      //   parametertype: [],
      //   parameterstatus: []
      // },
      // areaTree: [], // 中国所有城市树
      // currentNodeTableRowIndex: null,
      // currentCityTableRowIndex: null
      isChangeSort: false
    }
  },

  mounted () {
    this.userId = JSON.parse(localStorage.getItem('clientLoginInfo')).data.userId
    this.parameterId = this.$route.query.parameterId
    // this.getEnum()
    this.query()
  },

  computed: {
  },

  methods: {
    // 数据字典
    // getEnum () {
    //   let groupName = 'treatment.parametertype,treatment.parameterstatus'
    //   Common.getEnum(groupName, this.arrListDown)
    // },

    // 搜索
    searchFn () {
      this.query()
    },

    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      let res = await TreatmentApi.getTreatmentParameter({ParameterId: this.parameterId})
      if (res.status === 200 && res.data.success) {
        var result = res.data.data.data
        Object.keys(this.formData).forEach(key => {
          this.formData[key] = result[key]
        })
        // console.log('result: ', result)
        this.nodeTable = res.data.data.linkData ? res.data.data.linkData : []
        this.cityTable = res.data.data.cityData ? res.data.data.cityData : []
      } else {
        this.nodeTable = []
        this.cityTable = []
      }
      this.loading = false
    },

    // 显示新增节点弹窗
    handleShowCreateNodeModal (id) {
      this.$refs.CreateNodeModal.parameterID = this.parameterId
      this.$refs.CreateNodeModal.show()
      this.$refs.CreateNodeModal.isCreate = id ? false : true
      if (id) {
        this.$refs.CreateNodeModal.getModel(id)
      }
    },

    // 显示新增城市弹窗
    handleShowCreateCityModal (id) {
      this.$refs.CreateCityModal.parameterID = this.parameterId
      this.$refs.CreateCityModal.isCreate = id ? false : true
      if (id) {
        this.$refs.CreateCityModal.getModel(id)
      }
      this.$refs.CreateCityModal.show()
    },

    // 是否删除前询问
    isDeleteModal (row, tableType) {
      this.$Modal.confirm({
        title: '是否确认删除该条信息',
        onOk: () => {
          tableType === 'nodeTable' ? this.handleSureDeleteNodeRow(row) : this.handleSureDeleteCityRow(row)
        }
      })
    },

    // 确认删除环节
    async handleSureDeleteNodeRow (row) {
      console.log('确认删除', row)
      var params = {
        parameterLinkId: row.id,
        userid: this.userId,
        linkStatus: -99
      }
      let res = await TreatmentApi.upTreatmentParameterLinkStatus(params)
      console.log('确认删除res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 确认删除城市
    async handleSureDeleteCityRow (row) {
      console.log('确认删除', row)
      var params = {
        parameterCityId: row.id,
        userid: this.userId
      }
      let res = await TreatmentApi.deTreatmentParameterCityStatus(params)
      console.log('确认删除res: ', res)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 启用/禁用
    async enabledList (id, linkStatus) {
      console.log('id: ', id)
      var params = {
        parameterLinkId: id,
        userid: this.userId,
        linkStatus: linkStatus
      }
      let res = await TreatmentApi.upTreatmentParameterLinkStatus(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 交换数组元素
    swapItems (arr, index1, index2) {
      this.isChangeSort = true
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },

    // 上移
    handleMoveUp (index) {
      console.log('上移:', index)
      if (index == 0) {
        return
      }
      this.swapItems(this.nodeTable, index, index - 1)
    },

    // 下移
    handleMoveDown (index) {
      console.log('下移: ', index)
      if (index == this.nodeTable.length - 1) {
        return
      }
      this.swapItems(this.nodeTable, index, index + 1)
    },

    // 保存表格排序
    async handleSaveTableSort () {
      // console.log('❤ this[tableType]: ', this[tableType])
      var newTable = this.nodeTable.map((item, index) => {
        return {
          ParameterLinkId: item.id,
          LinkSort: index,
          RowVersion: item.rowVersion
        }
      })
      console.log('newTable: ', newTable)
      let res = await TreatmentApi.upTreatmentParameterLinkSort(newTable)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.query()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    // 附件下载
    handleDownLoad (row) {
      console.log('row.fileAnnex: ', row.fileAnnex)
      var url = baseUrl + '/Treatment/TreatmentDownLoadAttachment?id=' + row.fileAnnex
      window.open(url, '_blank')
    }
  }
}
</script>

<style>
</style>
